<template>
  <div class="bar-component">
    <div :id="id" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
  import echarts from "echarts";

  export default {
    props:{
      id:String,
      data: {
        type: Array,
        default: () => {
          return  []
        }
      }
    },
    data() {
      return {
        myChart:null,
        list:[],
        option: {
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c}<br/>占比 : {d}%"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            y: 'top',
            icon: 'roundRect',
            itemGap: 10,
            textStyle: {
              padding: [2, 0, 0, 0]
            }
          },
          color: ['#3AA1FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B'],
          grid: {
            top: 30,
            bottom: 30,
            left: 100,
            right: 100
          },
          series: [
            // 主要展示层的
            {
              radius: '60%',
              center: ['50%', '58%'],
              type: 'pie',
              roseType: "radius",
              label: {
                normal: {
                  formatter: '{b}'
                }
              },
              data: []
            },
          ]
        }
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        let {id} = this;
        this.myChart = echarts.init(document.getElementById(id));
        this.myChart.setOption(this.option);
      },
    },
    watch: {
      data: {
        handler(cur, old) {
          cur.map((v, i) =>{
            this.list.push({
              name: v.regionName,
              value: Number(v.value),
            })

          });
          this.option.series[0].data=this.list;
          //this.myChart.setOption(this.option);
        },
        deep: true,
        immediate: true
      }
    }
  };
</script>

<style scoped>
  .bar-component {
    height: 100%;
    width: 100%;
  }
</style>

